<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/combox.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>  
    <script type="text/javascript" src="../javascript/combox-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <script type="text/javascript" src="makedata.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
            padding: 30px 50px;
        }

        #wrap table {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- <button id="btn0001">创建</button> -->
   
    <div id="wrap" class="clearfix k_box_size">
        <table>
            <tr>
                <td style="width: 350px;">
                    <button onclick="setVal1()">设置值</button>
                </td>
                <td>
                    <button onclick="setVal2()">设置值</button>
                </td>
                <td>
                    <button onclick="setVal3()">设置值</button>
                </td>
                <td>
                    <button onclick="setVal4()">设置值</button>
                </td>
            </tr>
            <tr>
                <td style="width: 350px;">
                    <input style="width: 220px;" id="combox1" type="text" class="" />
                </td>
                <td>
                    <input style="width: 260px;" id="combox2" type="text" class="" />
                </td>               
                <td>
                    <input style="width: 260px;" id="combox3" type="text" class="" />
                </td>
                <td>
                    <input style="width: 260px;" id="combox4" type="text" class="" />
                </td>                
            </tr>
        </table>

    </div>
    <script type="text/javascript">
        var treeObj1, treeObj2, treeObj3;
        var combox1,combox2,combox3,combox4;
        function setVal1(){
            combox1.setSelected([5]);
        }
        function setVal2(){
            combox2.setSelected([1,5,9]);
        }
        function setVal3(){
            combox3.setSelected([8,9,10]);
        }

        function setVal4(){
            combox4.setSelected([211,212]);
        }

        function pageLoaded() {
            let start = new Date();
            var datas = [];
            datas.push({ id: 1, text: "java 开发" });
            datas.push({ id: 2, text: "web 开发" });
            datas.push({ id: 3, text: "JavaScript 开发", selected: true });
            datas.push({ id: 4, text: "大数据开发" });
            datas.push({ id: 5, text: "分布式服务开发" });
            datas.push({ id: 6, text: "前端页面开发" });
            datas.push({ id: 7, text: "移动APP开发" });
            datas.push({ id: 8, text: "微信开发" });
            datas.push({ id: 9, text: "小程序开发" });
            datas.push({ id: 10, text: "C++开发" });

            console.log(JSON.stringify(datas));

            //多选非只读，查询有bug

           combox1 = new $B.Combox("combox1", {                
                url: 'comboxlist.json',
                search: true,
                inputImdSearch:false,
                multiple: false,
                readOnly: false,
                onSelected:function(data){
                    console.log(data);
                },                
                onloaded:function(data){
                    console.log(data);
                }
            });


           
           combox2 = new $B.Combox("combox2", {
                data: datas,
                readOnly: false,
                multiple: true,
                onSelected:function(data){
                    console.log(data);
                },
                onloaded:function(data){
                    console.log(data);
                }
            });

         
            // console.log("create ok >>>>>>>>>>>>>>");
          combox3 =  new $B.Combox("combox3", {
                data: datas,
                readOnly: true,
                multiple: true,
                onSelected:function(data){
                    console.log(data);
                },
                onloaded:function(data){
                    console.log(data);
                }
            });

            var treeData = [{
                "id": "1",
                "text": "广西",
                "data": {},
                "children": [{
                    "id": "11",
                    "text": "南宁",
                    "data": {},
                    "children": [{
                        "id": "111",
                        "text": "青秀区",
                        "selected":true,
                        "data": {}
                    }, {
                        "id": "112",
                        "text": "良庆区",
                        "data": {}
                    }, {
                        "id": "113",
                        "text": "兴宁区",
                        "data": {}
                    }]
                },
                {
                    "id": "12",
                    "text": "桂林",
                    "data": {}
                },
                {
                    "id": "13",
                    "text": "柳州",
                    "data": {}
                }

                ]
            }, {
                "id": "2",
                "text": "广东",
                "data": {},
                "children": [
                    {
                        "id": "22",
                        "text": "东莞",
                        "selected":true,
                        "data": {}
                    },
                    {
                        "id": "23",
                        "text": "肇庆",
                        "data": {}
                    },
                    {
                        "id": "21",
                        "text": "广州",
                        "data": {},
                        "children": [{
                            "id": "211",
                            "text": "越秀区",
                            "data": {}
                        }, {
                            "id": "212",
                            "text": "花都",
                            "data": {}
                        }, {
                            "id": "213",
                            "text": "海珠区",
                            "data": {}
                        }]
                    }
                ]
            }];

          combox4 =  new $B.Combox("combox4", {
                // data: treeData,
                url:'comboxtree.json',
                isTree:true,
                getIdAndTxt:true,
                inputImdSearch:false,
                multiple:true,
                readOnly: false,
                onSelected:function(data){
                    console.log(data);
                },
                onloaded:function(data){
                    console.log(data);
                }
            });

        };
        var methodsObject = {
            test: function (pr) {
                alert(JSON.stringify(pr));
            }
        };
        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>